<template>
<onekit-page>
<onekit-view onekit-class="container">
	<div is="onekit-template-head" :DATA="`${JSON.stringify({title:'startSoterAuthentication'})}`"></div>
	<onekit-view onekit-class="page-body">
		<onekit-view v-if="startUDP" onekit-style="text-align: center">本机port: {{port}} 模拟远程port: {{remote_port}}</onekit-view>
		<onekit-view v-if="!startUDP" onekit-class="btn-area">
			<onekit-button type="primary" :disabled="!canIUse" @Tap="handleCreateUDPTap">开启 UDPSocket</onekit-button>
		</onekit-view>
		<template v-else>
			<onekit-view onekit-class="btn-area">
				<onekit-button type="primary" @Tap="handleSendMessage">本机发送测试</onekit-button>
			</onekit-view>
			<onekit-view onekit-class="btn-area">
				<onekit-button type="primary" @Tap="changeMode">远程发送测试</onekit-button>
			</onekit-view>
			<template v-if="mode == 'remote'">
				<onekit-input placeholder="请输入目标主机 IP 地址 默认: 127.0.0.1" @Input="handleInputChange"></onekit-input>
				<onekit-view onekit-class="btn-area">
					<onekit-button type="primary" @Tap="handleSendRemoteMessage">发送</onekit-button>
				</onekit-view>
			</template>
			<onekit-view onekit-class="btn-area">
				<onekit-button type="primary" @Tap="handleCloseUDPTap">关闭 UDPSocket</onekit-button>
			</onekit-view>
		</template>
	</onekit-view>
	<div is="onekit-template-foot"></div>
</onekit-view>
</onekit-page></template>
<script>
/* eslint-disable */
import Vue from 'vue';
import onekit_template_0 from '../../../common/head.head.vue';Vue.component('onekit-template-head',onekit_template_0);
import onekit_template_1 from '../../../common/foot.foot.vue';Vue.component('onekit-template-foot',onekit_template_1);
const ONEKIT_JSON= {
  "navigationBarTitleText": "UDPSocket",
  "usingComponents": {
    
  }
};
const ONEKIT_SJS = {
};
import wx from '../../../../weixin2vue/wx.js';
import Macro from '../../../../weixin2vue/Macro.js';
const {getApp,getCurrentPages} = Macro;
import Page from '../../../../weixin2vue/OnekitPage.js';
import Component from '../../../../weixin2vue/OnekitComponent.js';
const AB2String = (arrayBuffer)=>{
  let unit8Arr = new Uint8Array(arrayBuffer);
  let encodedString = String.fromCharCode.apply(null,unit8Arr),decodedString = decodeURIComponent(escape(encodedString));
  return decodedString;
};
export default Page(ONEKIT_JSON,["startUDP","本机port: ","port"," 模拟远程port: ","remote_port","canIUse","mode"],ONEKIT_SJS,{
    "onShareAppMessage"(){
      return {
        "title":'UDPSocket',
        "path":'packageAPI/pages/udp-socket/udp-socket'
};
    },
    "data":{
        "port":undefined,
        "remote_port":undefined,
        "startUDP":false,
        "mode":'local',
        "address":'localhost',
        "canIUse":true
},
    "onLoad"(){
      const canIUse = wx.canIUse('createUDPSocket');
      if(!canIUse)
      {
        wx.showModal({
            "title":'微信版本过低，暂不支持本功能'
});
        this.setData({
            canIUse
});
      };
    },
    "handleCreateUDPTap"(){
      this.UDPSocket = wx.createUDPSocket();
      this.remoteUDPSocket = wx.createUDPSocket();
      this.port = this.UDPSocket.bind();
      this.remote_port = this.remoteUDPSocket.bind();
      this.setData({
        "port":this.port,
        "remote_port":this.remote_port,
        "startUDP":true
});
      this.remoteUDPSocket.onMessage((res)=>{
      const {remoteInfo} = res;
      console.log(res);
      wx.showModal({
          "title":`IP:${remoteInfo.address}发来的信息`,
          "content":AB2String(res.message)
});
    });
    },
    "handleCloseUDPTap"(){
      this.setData({
        "startUDP":false,
        "mode":'local'
});
      console.log(this.data);
      this.UDPSocket.close();
      this.remoteUDPSocket.close();
    },
    "handleSendRemoteMessage"(){
      this.UDPSocket.send({
        "address":(this.data.address) || ('localhost'),
        "port":this.remote_port,
        "message":`port[${this.port}] 向 remote-port[${this.remote_port}] 发送信息: Hello Wechat!`
});
    },
    "changeMode"(){
      this.setData({
        "mode":'remote'
});
    },
    "handleInputChange"(e){
      this.setData({
        "address":e.detail.value
});
    },
    "handleSendMessage"(){
      this.UDPSocket.send({
        "address":'localhost',
        "port":this.remote_port,
        "message":`port[${this.port}] 向 remote-port[${this.remote_port}] 发送信息: Hello Wechat!`
});
    }
});

</script>
<style 
 lang="css">
</style>